<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-form-item label="部门名称">
        <el-input v-model="section.sectionName"/>
      </el-form-item>
      <el-form-item label="部门排序">
        <el-input-number v-model="section.sort" controls-position="right" min="0"/>
      </el-form-item>
      <el-form-item label="部门信息">
        <el-input v-model="section.intro" :rows="10" type="textarea"/>
      </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import sectionApi from '@/api/manager/section'
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'
export default {
    components:{ImageCropper, PanThumb},
    data(){
        return{
            section:{
               // sort: 0
               },
           imagecropperShow: false,
           imagecropperKey: 0,
            BASE_API: process.env.BASE_API,saveBtnDisabled: false}
    },
    created(){
        this.init()
    },
    watch:{ $route(to,from){ this.init()
        }
    },
    methods:{
        init(){
           if(this.$route.params && this.$route.params.id){
               const id = this.$route.params.id

               this.getInfo(id)
            }else{
                this.section = {}
            }
        },
       getInfo(id){
            sectionApi.getSectionInfo(id)
            .then(response => {
                this.section = response.data.section
            })
        },

       saveOrUpdate(){
           if(!this.section.id){
                 this.saveSection();
              }else{
                 this.updateSection();
              }
        },
       updateSection(){
            sectionApi.updateSection(this.section)
            .then(response => {
               this.$message({
                    type: 'success',
                    message: '修改成功!'
                });
               this.$router.push({path:'/section/table'})
            })
        },
       saveSection(){
            sectionApi.addSection(this.section)
            .then(response => {
               this.$message({
                    type: 'success',
                    message: '保存成功!'
                });
               this.$router.push({path:'/section/table'})
            })
            .catch()
        },
        close(){this.imagecropperShow = false
         this.imagecropperKey = this.imagecropperKey + 1
        }
    }
}
</script>
